// require(['./config'], () => {
//     require(['jquery', 'ajax'], () => {
//         $('.header-container').load('./header.html')
//         $('.footer-container').load('./footer.html')

        class Cart {
            constructor() {
                //获取元素
                this.cartTable = document.querySelector('.cartTable')
                this.tbody = document.querySelector('tbody')
                this.totalNum = document.querySelector('.totalNum')
                this.money = document.querySelector('.money')
                this.selectAll = document.querySelector('.selectAll')
                //获取数据
                this.data = JSON.parse(localStorage.getItem('cart')) || []
                //调用init方法
                this.init()
            }
            init() {
                this.render()
                this.bindHtml()
                this.total()
            }
            //根据数据渲染页面
            render() {
                this.tbody.innerHTML = ''
                //列表页面添加了商品，购物车里面就有数据，否则就没有数据
                if (!this.data.length) {
                    //如果没有数据就进入给用户一个提示
                    this.tbody.innerHTML = `
                        <tr height="100">
                            <td colspan="6">
                                <h1>在忙也要犒劳一下自己，赶紧去购物吧<a href="../index.html">Go</a</h1>
                            </td>
                        </tr>  
                    `
                } else {
                    this.data.forEach(item => {
                        this.tbody.innerHTML += `
                        <tr>
                            <td><input type="checkbox" value="" class="select" data-id="${item.goods_id}" ${item.is_select && "checked"}/></td>
                            <td>
                                <img src="${item.img_small_logo}">
                                <div>
                                    <a href="#" class="hide">${item.title}</a>
                                </div>
                            </td>
                            <td><span class="price">${item.price}</span></td>
                            <td>
                                <span class="sub" data-id="${item.goods_id}">-</span>
                                <input type="text" value="${item.cart_number}" class="txt" data-id="${item.goods_id}" />
                                <span class="add" data-id="${item.goods_id}">+</span>
                            </td>
                            <td><span class="subTotal">${(item.cart_number * item.price).toFixed(2)}元</span></td>
                            <td><span class="del" data-id="${item.goods_id}">删除</span></td>
                        </tr>
                        `
                    })
                }
                //数据持久化
                localStorage.setItem('cart', JSON.stringify(this.data))
            }
            //给html绑定各种事件
            bindHtml(){
                //做事件委派
                this.cartTable.addEventListener('click',(e) =>{
                    //事件对象兼容写法
                    e = e ||window.event
                    //事件(目标事件)源对象兼容写法
                    let target = e.target || e.srcElement
                    //做全选功能
                    if(target.className == 'selectAll'){
                        //console.log(this.data)
                        //获取全选按钮的状态
                        let type = target.checked
                        //当点击全选按钮的时候，让所有的单选按钮选中或者未选中
                        //思路：使用数据驱动页面，修改的是数组
                        this.data.forEach(item =>{
                            item.is_select = type
                        })
                        //当修改了页面应该重新渲染页面
                        this.render()
                        this.total()
                    }
                    //单选功能
                    if(target.className == 'select'){
                        let id = target.dataset.id - 0
                        let goods = this.data.find(item =>{
                            return item.goods_id == id
                        })
                        //改变选中状态
                        goods.is_select = !goods.is_select
                        //渲染页面
                        this.render()
                        this.total()
                    }
                    //点击数量增加
                    if(target.className == 'add'){
                        let id = target.dataset.id - 0
                        let goods = this.data.find(item =>{
                            return item.goods_id == id
                        })
                        if(goods.cart_number == goods.goods_number){
                            alert('只能买这么多！')
                            return false
                        }
                        goods.cart_number ++
                        //渲染页面
                        this.render()
                        this.total()
                    }
                    //点击数量减少
                    if(target.className == 'sub'){
                        let id = target.dataset.id - 0
                        let goods = this.data.find(item =>{
                            return item.goods_id == id
                        })
                        if(goods.cart_number == 1){
                            return false
                        }
                        goods.cart_number --
                        //渲染页面
                        this.render()
                        this.total()
                    }
                    //删除操作
                    if(target.className =='del'){
                        let id = target.dataset.id -0
                        //返回是在数组里面的位置
                        let index = this.data.findIndex(item =>{
                            return item.goods_id ==id
                        })
                        this.data.splice(index,1)
                        //如果数组是空的，把全选框的状态改为false
                        if(!this.data.length){
                            this.selectAll.checked = false
                        }
                        //渲染页面
                        this.render()
                        this.total()
                    }
                    //清空购物车
                    if (target.className == 'dlAll') {
                        //如果都是true的状态说明都是选中的，把你给过滤掉，只剩下状态是false的重新赋值
                        let res = this.data.filter(item => { return item.is_select == false })
                        this.data = res
                        //如果数组是空的，把全选框的状态改为false
                        if (!this.data.length) {
                            this.selectAll.checked = false
                        }
                        //渲染页面
                        this.render()
                        this.total()
                    }
                },false)
            }
            //计算总价和数量
            total() {
                //使用两个变量保存总的数量和总的价格
                let num = 0
                let money = 0
                //遍历数组
                this.data.forEach(item => {
                    //当单选按钮时选中的状态的时候应该计算
                    if (item.is_select == true) {
                        num += item.cart_number
                        money += item.cart_number * item.price
                        //当咱们单选框是选中的状态进行判断全选框是否选中
                        let res = this.data.every(item => { return item.is_select == true })
                        if (res) {
                            this.selectAll.checked = true
                        } else {
                            this.selectAll.checked = false
                        }
                    }
                })
                //进行赋值操作
                this.totalNum.innerHTML = num
                this.money.innerHTML = money
            }
        }
        new Cart()
//     })
// })
